<md-card>
    <table ng-if="servers" class="table" style="margin-bottom: 0px;">
        <tr>
            <th>
                Cluster Logs 
                <span class="pull-right">
                    <button ng-click="togglePanel('log')">
                        <span ng-show="showLog">Hide</span>
                        <span ng-show="!showLog">Show</span>
                    </button>
                </span>
            </th>
        </tr>
    </table>
    <md-card-content ng-if="selectedCluster && showLog" style="min-height: 0px; max-height: 400px; overflow-y: auto">
        <table style="table-layout: fixed;width: 100%;" class="log">
            <tr ng-repeat="logline in selectedCluster.log.buffer" ng-if="logline.timestamp">
                <td width="150px" class="stamp">{{ logline.timestamp }}</td>
                <td width="70px" ng-switch="logline.level">
                    <span ng-switch-when="INFO" class="label label-info">{{ logline.level }}</span>
                    <span ng-switch-when="WARN" class="label label-warning">{{ logline.level }}</span>
                    <span ng-switch-when="ERROR" class="label label-danger">{{ logline.level }}</span>
                    <span ng-switch-when="DEBUG" class="label label-primary">{{ logline.level }}</span>
                    <span ng-switch-default class="label label-default">{{ logline.level }}</span>
                <td class="text" style="word-wrap:break-word;white-space: normal;">{{ logline.text }}</td>
            </tr>
        </table>
        </md-pre>
    </md-card-content>
</md-card>
<md-card>
    <table ng-if="servers" class="table" style="margin-bottom: 0px;">
        <tr>
            <th>
                Job Logs 
                <span class="pull-right">
                    <button ng-click="togglePanel('task')">
                        <span ng-show="showLogTask">Hide</span>
                        <span ng-show="!showLogTask">Show</span>
                    </button>
                </span>
            </th>
        </tr>
    </table>
    <md-card-content ng-if="selectedCluster && showLogTask" style="min-height: 0px; max-height: 300px; overflow-y: auto">
        <table style="table-layout: fixed;width: 100%;" class="log">
            <tr ng-repeat="logline in selectedCluster.logTask.buffer" ng-if="logline.timestamp">
                <td width="150px" class="stamp">{{ logline.timestamp }}</td>
                <td width="70px" ng-switch="logline.level">
                    <span ng-switch-when="INFO" class="label label-info">{{ logline.level }}</span>
                    <span ng-switch-when="WARN" class="label label-warning">{{ logline.level }}</span>
                    <span ng-switch-when="ERROR" class="label label-danger">{{ logline.level }}</span>
                    <span ng-switch-when="DEBUG" class="label label-primary">{{ logline.level }}</span>
                    <span ng-switch-default class="label label-default">{{ logline.level }}</span>
                <td class="text" style="word-wrap:break-word;white-space: normal;">{{ logline.text }}</td>
            </tr>
        </table>
        </md-pre>
    </md-card-content>
</md-card>